<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'

// 使用 useRouter 创建一个 router 实例
const router = useRouter()

const back = () => {
  console.log('1234')
  router.go(-1);
}

</script>

<template>
  <div id="box">
    <!-- 导航 -->
    <div class="navBox">
      <div class="navBox_title">
        <div style="width: 42%;"><van-icon name="arrow-left" @click="back" /></div>
        <div>文章资讯</div>
      </div>

    </div>
    <!-- 列表 -->
    <div class="fl_Box">
      <div class="fl_Box_font1">向日葵的花语</div>
      <div class="fl_Box_font2">向日葵的花语</div>
      <div class="fl_Box_font3">
        <div>
          向日葵的花语是忠诚、沉默的爱。因为向日葵是太阳虔诚的追
          随者，每天随着太阳运行的方向转动，把自己一生所有的热爱都献
          给了太阳，但是又从来都不会说出口，所以向日葵的花语便是忠
          诚、沉默的爱。
        </div>
        <div>
          但也是因为向日葵无时无刻不在向着太阳生长，所以它也有着
          自信和阳光的寓意。
        </div>
        <div>
          传说克丽泰是一位水泽仙女。一天，她在树林里遇见了正在狩
          猎的太阳神阿波罗，她深深为这位俊美的神所着迷，疯狂地爱上了
          他。可是，阿波罗连正眼也不瞧她一下就走了。克丽泰热切地盼望
          有一天阿波罗能对她说说话，但她却再也没有遇见过他。于是她只
          能每天注视着天空，看着阿波罗驾着金碧辉煌的日车划过天空。她
          目不转睛地注视着阿波罗的行程，直到他下山。每天每天，她就这
          样呆坐着，头发散乱，面容憔悴。一到日出，她便望向太阳。后
          来，众神怜悯她，把她变成一大朵金黄色的向日葵。她的脸儿变成
          了花盘，永远向着太阳，每日追随他--阿波罗，向他诉说她永远
          不变的恋情和爱慕。因此，向日葵的花语就是--沉默的爱。
        </div>
      </div>
      <div class="btn">精品推荐&nbsp;>></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#box {
  .navBox {
    height: 60px;
    background-color: #f6f6f6;

    .navBox_title {
      color: #000;
      display: flex;
      padding: 10px;
      box-sizing: border-box;
    }
  }

  .fl_Box {
    background-color: #fff;
    border-radius: 10px 10px 0 0;
    margin-top: -10px;
    box-sizing: border-box;

    .fl_Box_font1 {
      font-weight: bold;
      font-size: 18px;
      padding: 15px 5px 0;
    }

    .fl_Box_font2 {
      font-size: 14px;
      padding: 0 5px 15px;
      margin: 5px 0 10px;
      color: #878787;
      border-bottom: 1px solid #ccc;
    }

    .fl_Box_font3 {
      padding: 0 5px;

      div {
        text-indent: 2em;
        color: #4f4f4f;
      }
    }
    .btn{
      width: 95%;
      margin: auto;
      padding: 10px 0;
      background-color: #f96e75;
      color: #fff;
      text-align: center;
      border-radius: 50px;
      position: fixed;
      left: 2.5%;
      bottom: 3%;
      box-sizing: border-box;
    }
  }
}
</style>